<template>
  <div id="shop-manage">
    <div class="search-box">
      <el-form>
        <el-form-item label="博主名称：">
          <el-input placeholder v-model="searchForm.shopName" size="small" class="form-input" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button class="search-btn" icon="el-icon-ali-search" @click="searchData()">查&nbsp;询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <div class="add-shop-box">
        <el-button class="add-btn" icon="el-icon-plus" @click="showAddDialog">添加博主</el-button>
        <div class="tips">博主可以直接添加，余额不足不能添加博主哦。</div>
      </div>
      <el-table border :data="shopList" max-height="580px">
        <el-table-column prop="type" :formatter="getPlantformType" label="平台"/>
        <el-table-column prop="name" label="博主名称"/>
        <el-table-column prop="url" label="博主首页链接">
          <div slot-scope="scope">
            <div class="look-btn" @click="toBloggerUrl(scope.row)" v-if="scope.row.url">查看</div>
          </div>
        </el-table-column>
      </el-table>

      <el-table border id="table_data" :data="allBloggerList" v-show="false">
        <el-table-column prop="type" :formatter="getPlantformType" label="平台"/>
        <el-table-column prop="name" label="博主名称"/>
        <el-table-column prop="url" label="博主首页链接"/>
      </el-table>
      <div class="table-footer">
        <el-button icon="el-icon-download" class="download-btn" @click="downloadExcel">导出</el-button>
        <div>
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="searchForm.pageSize" :current-page="searchForm.page"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="allNum" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="添加博主" :visible.sync="isShowAddBloggerDialog" width="400px" class="dialog-style add-dialog">
      <el-form>
        <el-form-item label="博主昵称:">
          <el-input v-model="bindShopForm.name" size="small" clearable placeholder="请输入博主昵称"/>
        </el-form-item>
        <el-form-item label="小红书号:">
          <el-input v-model="bindShopForm.account" size="small" clearable placeholder="请输入博主小红书号"/>
        </el-form-item>
        <el-form-item label="博主首页链接:">
          <el-input v-model="bindShopForm.url" size="small" maxlength="1000" clearable placeholder="请输入博主首页链接"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddBloggerDialog = false" class="cancel-btn">取 消</el-button>
        <el-button @click="submitBlogger" :loading="bindLoading" :disabled="bindLoading" class="submit-btn">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  apiMerchantShop,
  apiXhsBlogger, apiBindBlogger,
} from '../../request/api.js'
import {mapGetters, mapActions} from 'vuex';

export default {
  data() {
    return {
      searchForm: {
        token: '',
        shopName: '',
        page: 1,
        pageSize: 10
      },
      shopNameList: [],
      shopNameOptions: [],
      shopList: [],
      allBloggerList: [],
      flagForm: {
        shopId: '',
        token: '',
        flagRemark: '',
        flagType: null
      },
      bindType: {
        1: '自动',
        2: '其他'
      },
      platformType: { 21: '小红书'},
      bindStatus: {
        1: '是',
        2: '否'
      },
      shopShowType: window.localStorage.getItem('shopShowType'),
      shopCheckList: [{
        label: '小红书',
        value: 21
      }],
      isShowShopAutoTiktok: false,
      shopUrl: '',
      allNum: 0,
      bindShopForm: {
        token: '',
        type: 21,
        name: '',
        url: '',
        account: ''
      },
      bindLoading: false,
      isShowAddBloggerDialog: false,
      isShowFlagDialog: false,
      flagLoading: false,
      shopAuthLoading: false,
      isShowShopAutoDialog: false,
      isClickAuto: false,
      isClickOrder: false,
      userToken: window.localStorage.getItem('token'),
      merchantData: JSON.parse(window.localStorage.getItem('merchantConfig')),
      rowPlatformType: ''
    }
  },
  created() {
    this.getInitData();
  },
  methods: {
    ...mapActions(['setShopNameList']),
    getInitData() {
      this.searchForm.token = this.userToken
      this.$isClick(true);
      apiXhsBlogger(this.searchForm).then(res => {
        this.$isClick(false);
        if (res.code == 1) {
          this.shopList = res.msg.merchant_shop_list;
          this.allNum = res.msg.all_num
        } else {
          this.$message.error(res.msg);
        }
      }).catch(res => {
        this.$isClick(false);
        this.$message.error(res.msg)
      })
    },

    toBloggerUrl(row) {
      window.open(row.url, 'shopUrl')
    },

    getPlantformType(row) {
      return this.platformType[row.type]
    },

    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getInitData();
    },

    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getInitData();
    },

    showAddDialog() {
      if (this.merchantData.add_shop == 1) {
        this.bindShopForm = {
          token: this.userToken,
          type: 21,
          name: '',
          account: '',
          url: ''
        }
        this.isShowAddBloggerDialog = true
      } else {
        this.$message.error('店铺已饱和，如果需要继续添加请联系管理员');
      }

    },

    submitBlogger() {
      if (!this.bindShopForm.name) {
        this.$message.error('博主昵称不能为空！')
        return
      }
      if (this.bindShopForm.name.indexOf(' ') >= 0) {
        this.$message.error('博主昵称不能为空格！')
        return
      }
      if (!this.bindShopForm.account) {
        this.$message.error('博主首页链接不能为空！')
        return
      }
      if (!this.bindShopForm.url) {
        this.$message.error('店铺链接不能为空！')
        return
      }
      this.bindLoading = true
      apiBindBlogger(this.bindShopForm).then(res => {
        this.bindLoading = false
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.isShowAddBloggerDialog = false
          this.getInitData()
        } else {
          this.$message.error(res.msg);
        }
      }).catch(res => {
        this.bindLoading = false
        this.$message.error(res.msg)
      })
    },

    searchData() {
      this.searchForm.page = 1
      this.searchForm.pageSize = 10
      this.getInitData()
    },

    getAllTableData() {
      let data = JSON.parse(JSON.stringify(this.searchForm))
      data.page = 1
      data.pageSize = this.allNum
      if (data.pageSize == 0) {
        this.$message.error('当前表格没有数据可以导出');
        return
      }
      return new Promise((resolve) => {
        this.$isClick(true);
        apiXhsBlogger(data).then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.allBloggerList = res.msg.merchant_shop_list;
            resolve(res);
          } else {
            this.$message.error(res.msg);
          }
        }).catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg)
        })
      })

    },
    downloadExcel() {
      this.$loading.show('下载中')
      var wb = ''
      var xlsxParam = {raw: true}
      this.getAllTableData().then(() => {
        wb = this.XLSX.utils.table_to_book(document.querySelector('#table_data'), xlsxParam)
        var wbout = this.XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          this.FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '博主信息.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        setTimeout(() => {
          this.$loading.hide()
          this.$message.success('下载完成')
        }, 1000);
        return wbout
      })
    }
  }
}
</script>

<style lang="less">
#shop-manage {
  .add-shop-box {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    background: #FFFFFF;

    .add-btn {
      height: 32px !important;
      padding: 0px 10px !important;
      background: @themeColor;
      color: #ffffff;
    }

    .tips {
      font-size: 14px;
      margin-left: 10px;
      color: #666666;
    }
  }

  .table-box {
    .look-btn {
      height: 28px !important;
      padding: 0px 15px !important;
      background: #ff5001;
      color: #ffffff;
      display: inline-block;
      line-height: 28px;
      border-radius: 3px;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .dialog-style {
    &.add-dialog {
      .el-dialog {
        height: 360px;
      }
    }

    &.flag-dialog {
      .el-dialog {
        height: 360px;
      }
    }

    &.auth-dialog {
      .el-dialog {
        min-height: 475px;
      }

      .autho-box {
        display: flex;

        .left-box {
          .num {
            width: 20px;
            height: 20px;
            background: red;
            color: #FFFFFF;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
          }

          .line {
            width: 1px;
            height: 100px;
            background: red;
            margin-left: 9px;
          }
        }

        .right-box {
          margin-left: 20px;

          .title-1 {
            color: #888888;

            b {
              color: red;
            }
          }

          .title-2 {
            color: red;
            margin: 8px 0;
          }

          .auto-btn {
            background: red;
            display: inline-block;
            color: #FFFFFF;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
          }

          .input {
            margin-top: 10px;
            width: 200px;
            display: block;
          }
        }
      }
    }

    .radio-list {
      margin-bottom: 20px;

      .el-radio {
        margin-right: 16px;
      }

      .title {
        display: inline-block;
        vertical-align: sub;
      }

      .el-radio__label {
        padding-left: 5px !important;
      }

      .flag-img {
        width: 23px;
        height: 23px;
        display: inline-block;
        vertical-align: bottom;
      }
    }
  }
}
</style>
